<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>时间展示页面</title>
		<!-- css样式-->
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<!-- js文件-->
		<script language="javascript" type="text/javascript" src="../layui/layui.all.js"></script>
		<script type="text/javascript" src="../js/TimeView.js"></script>
	</head>
	<body>

		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			<legend>常规用法</legend>
		</fieldset>

		<div class="layui-form">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">中文版</label>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label" style="width: 95px;">类型参数示例</label>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" id="test1-1" placeholder="yyyy-MM-dd">
					</div>
				</div>
			</div>
		</div>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			<legend>时间范围</legend>
		</fieldset>

		<div class="layui-form">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">日期范围</label>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" id="test6" placeholder=" - ">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">年范围</label>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" id="test7" placeholder=" - ">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">年月范围</label>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" id="test8" placeholder=" - ">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">时间范围</label>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" id="test9" placeholder=" - ">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label" style="width: 95px;">日期时间范围</label>
					<div class="layui-input-inline" style="width: 300px;">
						<input type="text" class="layui-input" id="test10" placeholder=" - ">
					</div>
				</div>
			</div>
		</div>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
			<legend>自定义格式</legend>
		</fieldset>
		
		<div class="layui-form">
		  <div class="layui-form-item">
		    <div class="layui-inline">
		      <label class="layui-form-label">请选择日期</label>
		      <div class="layui-input-inline">
		        <input type="text" class="layui-input" id="test11" placeholder="yyyy年MM月dd日">
		      </div>
		    </div>
		    <div class="layui-inline">
		      <label class="layui-form-label">请选择日期</label>
		      <div class="layui-input-inline">
		        <input type="text" class="layui-input" id="test12" placeholder="dd/MM/yyyy">
		      </div>
		    </div>
		    <div class="layui-inline">
		      <label class="layui-form-label">请选择月份</label>
		      <div class="layui-input-inline">
		        <input type="text" class="layui-input" id="test13" placeholder="yyyyMMdd">
		      </div>
		    </div>
		    <div class="layui-inline">
		      <label class="layui-form-label">请选择时间</label>
		      <div class="layui-input-inline">
		        <input type="text" class="layui-input" id="test14" placeholder="H点m分s秒">
		      </div>
		    </div>
		    <div class="layui-inline">
		      <label class="layui-form-label">请选择范围</label>
		      <div class="layui-input-inline">
		        <input type="text" class="layui-input" id="test15" placeholder=" ~ ">
		      </div>
		    </div>
		    <div class="layui-inline">
		      <label class="layui-form-label">请选择范围</label>
		      <div class="layui-input-inline" style="width: 360px;">
		        <input type="text" class="layui-input" id="test16" placeholder="开始 到 结束">
		      </div>
		    </div>
		  </div>
		</div>
	</body>
</html>
